{% extends "../templates/base.html" %}

{% block title %}Dashboard{% endblock %}

{% block css_js %}
    <link media="screen" href="/static/css/dashboard.css" type="text/css" rel="Stylesheet">
    <style>
    div.space:hover {background: #ffffee; cursor: pointer}
    </style>
{% endblock %}

{% block content %}
    <h2>Space Dashboard</h2>

	<h3>Active Spaces</h3>

    {% for space in spaces %}
	<div class="space" onclick="document.location.href='/space/{{ space.id }}'">
		<div class="top">
			<h3>{{ space.name }}</h3>
		</div>
		<div class="bottom">
			<span class="contact">
				<span class="label">Administrator:</span>
				<a href="mailto:{{ space.admin.email }}">{{ space.admin.username }}</a>
            </span>
		</div>
        <div class="operation">
            <span class="label">Operations:</span>
            <a href="/space/delete_space/{{ space.id }}">Delete</a>
            <a href="/space/translate_space/{{ space.id }}">Translate</a>
            <a href="/space/duplicate_space/{{ space.id }}">Duplicate</a>
        </div>
        <div class="desc">{{ space.description }}</div>
	</div>	

	<br/>
    {% endfor %}

	<a href="#" onclick="toggle('new_space'); clr('ta_new_space');fcs('tf_desc'); return false;">new space</a>
	<div id="new_space" style="display: none;">
		<form id="form_new_space" action="/space/new_space" method="post">
			<table>
				<tr>
                    <td width="120"><b>Space Name:</b></td>
                    <td><input id="tf_desc" type="text" name="name" size="50" /></td>
                </tr>
				<tr>
					<td colspan="2"><b>Space Description</b></td>
				</tr>
				<tr>
					<td colspan="2">
						<textarea id="ta_new_space" rows="4" name="description" cols="72"></textarea>
					</td>
				</tr>

			</table>
			<a href="#" onclick="submit('form_new_space'); return false;">add</a>
			<a href="#" onclick="toggle('new_space'); return false;">cancel</a>
		</form>
	</div>

	</div>

{% endblock %}
